<template>
  <div id="app">
<!--    <div id="line_chart" ref="line_chart"></div>-->
    <div>
      <img src="@/assets/img_1.png" width="940rem">
    </div>
  </div>
</template>

<script>
  import {eventBus} from "../../../assets/Bus";
  export default {
    data() {
      return {
        myChart: null,
        cdata: {

        }
      };
    },
    mounted() {
      this.showScatterInGeo(this.cityCode);
      this.getData();
      // this.clickGoNext();
    },
    methods: {
      /*
        geo:地理坐标系组件( https://echarts.apache.org/zh/option.html#geo)
        地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图
      */
      showScatterInGeo() {
        this.myChart = this.$echarts.init(this.$refs.line_chart);
        // var chinamap = require("../../../assets/map/china.json"); //使用 require 引入地图组件，而不是在开头的 import
        // this.$echarts.registerMap("china", chinamap);
        var option;
        option = {
          title: {
            text: '月感染数最多城市',
            top: 10,
            padding: 5
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['北京','广州', '重庆', '郑州','成都']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2022-11-25', '2022-11-26', '2022-11-27', '2022-11-28', '2022-11-29']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '北京',
              type: 'line',
              stack: 'Total',
              data: [424, 586, 747, 840, 957,]
            },
            {
              name: '广州',
              type: 'line',
              stack: 'Total',
              data: [734, 824, 1177, 1129, 959]
            },
            {
              name: '重庆',
              type: 'line',
              stack: 'Total',
              data: [258, 199, 194, 238, 209]
            },
            {
              name: '郑州',
              type: 'line',
              stack: 'Total',
              data: [138, 180, 164, 142, 163]
            },
            {
              name: '成都',
              type: 'line',
              stack: 'Total',
              data: [77, 101, 92, 104, 122]
            }
          ]
        };
        // 4. myChart.setOption
        this.myChart.setOption(option);
      },

      getData(){
        var _this = this
        this.$http.get('http://localhost:8005/EpidemicData/getCityConfirmData').then(response =>{
          var data = response.data
          if(data.code == 200){
            let citys = []
            // let values1 = []
            // let values2 = []
            // console.log("长度："+data.data.length)
            for (var i = 0;i<data.data.length;i++){
              citys.push(data.data[i].city)
            //   names.push(data.data[i].name)
            //   values1.push(data.data[i].totalTask)
            //   values2.push(data.data[i].finishedTask)
            }
            // _this.cdata.category=names

            // _this.cdata.totalTaskData=values1
            // _this.cdata.finishedTaskData=values2
            //
            // for (let i = 0; i < _this.cdata.totalTaskData.length; i++) {
            //   let rate = _this.cdata.finishedTaskData[i]/_this.cdata.totalTaskData[i];
            //   _this.cdata.rateData.push(rate.toFixed(2));
            // }

          }else{
            console.log('失败')
          }
        })
      },

      /*
        鼠标事件： https://echarts.apache.org/zh/api.html#echartsInstance.on
        echarts.getMap() :https://echarts.apache.org/zh/api.html#echarts.getMap
          1.  只有用echarts的地图，才能使用  echarts.getMap("china").geoJson.features
      */
      clickGoNext() {
        var that = this;
        var dataList = that.$echarts.getMap("china").geoJson.features;
        // console.log("dataList:", dataList);

        // 鼠标事件
        this.myChart.on("click", function (res) {
          eventBus.$emit("getEchartMapData", res)
          console.log("click city:", res.name);
          dataList.forEach((element) => {
            if (element.properties.name == res.name) {
              console.log("city code:", element.id);
            }
          });
        });
      },
    },
  };
</script>

<style scoped>
#line_chart {
  width: 90%;
  height: 25rem;
  background-color: #f1f3f4;
  padding-top: 5rem;
  padding-left: 3rem;
  /*padding-right: 0.1rem;*/
}
</style>
